<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>
<div>
    <div id="box1" class="box" name="message"></div>
    <a href="#">主页</a>
    <input value="admin"/>
</div>
</body>
<script>

    /**
     *  DOM ： Document Object Model ，文档对象模型
     *       1. 结构
     *           html是根节点
     *           head body
     *           树状的父子结构
     *       2. 节点
     *           元素 属性 内容 —— html 、文本
     * */

     /**
      *   1. 获取dom节点
      *  id class tag
      *    innerHTML innerText
      * */
   // var box1=  document.getElementById('box1');
  //  var boxes=document.getElementsByClassName('box');
   // var boxes= document.getElementsByTagName('div');
    var boxes=  document.getElementsByName('message');
    boxes[0].innerText="box1";

    /*box1.innerText = "<h1>hello</h1>";
    box1.innerHTML="<h1>hello</h1>";*/


    /***
     * 2.改变dom节点的属性
     * */

   var achor= document.getElementsByTagName('a')[0];
   achor.href ="index.html";
   alert(achor.href);

   var input1 =  document.getElementsByTagName('input')[0];
   input1.value = "test";



</script>
</html>